<template>
  <!-- 最简竖柱状图 -->
  <div style="height:300px;width:100%;overflow: hidden;">
    <Row v-if="option.series.length===0" class="bg-fff" style="height:300px;" type="flex" align="middle" justify="center">
      <img src="~@/assets/img/efficiencyAnalysis/zwsj.png" style="width:190px;" />
    </Row>
    <div ref="main" style="overflow: hidden;width:100%;height:300px;"></div>
  </div>
</template>

<script>
import { Style } from "./echartsStyle.js";
export default {
  props: {
    viewData: {
      type: Object,
      default: null
    },
    lineColor: {
      type: String,
      default: "#666" //测试要求线条颜色以及文字颜色
    },
    legendWH: {
      type: Number,
      default: 10 //测试要求图例circle宽高10px
    }
  },
  data() {
    return {
      option: {
        legend: {
          data:
            this.viewData != null && "lData" in this.viewData
              ? this.viewData.lData
              : [],
          icon: "circle",
          itemWidth: this.legendWH,
          itemHeight: this.legendWH,
          top: "1%"
          // textStyle:{
          //   color:this.lineColor
          // }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        grid: {
          ...Style.grid
        },
        dataZoom: [
          {
            type: "inside"
          }
        ],
        color: Style.color,
        xAxis: {
          show: true,
          name: this.viewData != null ? this.viewData.xName : "",
          type: "category",
          data: this.viewData != null ? this.viewData.xData : [],
          nameTextStyle: {
            padding: [27, 0, 0, 0],
            color: this.lineColor //x轴单位的颜色
          },
          axisLine: {
            show: true, //x轴,测试要求加上
            lineStyle: {
              type: "solid",
              color: "#e8e8e8" //x轴线的颜色
            }
          },
          axisLabel: {
            color: this.lineColor //x轴文字的颜色
          },
          axisTick: {
            show: false //测试要求不显示刻度线
          }
        },
        yAxis:
          this.viewData != null
            ? "yData" in this.viewData &&
              this.viewData.yData != null &&
              this.viewData.yData.length > 0
              ? this.viewData.yData
              : {
                  name: this.viewData != null ? this.viewData.yName : "",
                  type: "value"
                }
            : {
                name: this.viewData != null ? this.viewData.yName : "",
                type: "value"
              },
        series: this.viewData != null ? this.viewData.sData : []
      }
    };
  },
  computed: {},
  watch: {
    viewData(value) {
        if ("yName" in value) {
          this.option.yAxis.name = value.yName;
        } else {
          this.viewData.yName = "";
        }
        if ("xName" in value) {
          this.option.xAxis.name = value.xName;
        } else {
          this.option.xAxis.name = "";
        }
        if ("toolTip" in value) {
          this.option.tooltip = value.toolTip;
        } else {
          this.option.tooltip = this.option.tooltip;
        }
        if ("lData" in this.viewData) {
          this.option.legend.data = value.lData;
        }
        if (
          "yData" in this.viewData &&
          this.viewData.yData != null &&
          this.viewData.yData != []
        ) {
          this.option.yAxis = value.yData;

          this.option.yAxis.map((item, index) => {
            item.nameTextStyle = {
              color: this.lineColor //y轴单位的颜色
            };
            item.axisLine = {
              show: false, //y轴,测试要求加上
              lineStyle: {
                color: this.lineColor //y轴线的颜色
              }
            };
            item.axisLabel = {
              color: this.lineColor //y轴文字的颜色
            };
            item.axisTick = {
              show: false //测试要求不显示刻度线
            };
          });
        }
        if ("color" in value) {
          this.option.color = value.color;
        }
        if ("grid" in value) {
          this.option.grid = value.grid;
        } else {
          this.option.grid = Style.grid;
        }

        this.option.xAxis.data = value.xData;
        this.option.series = value.sData;

        this.$nextTick(() => {
          let myChart = this.$echarts.init(this.$refs.main);
          myChart.setOption(this.option, true);
        });
    }
  },
  methods: {},
  created() {},
  mounted() {
    // let myChart = this.$echarts.init(this.$refs.main);
    // myChart.setOption(this.option);
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
</style>
